<template>
  <div class="blogitem-container">
    <div class="left-box" v-if="blogItem?.thumb">
      <router-link
        :to="{
          name: 'BlogDetail',
          params: {
            id: blogItem?.id,
          },
        }"
      >
        <img v-lazy="blogItem?.thumb" alt="" />
      </router-link>
    </div>
    <div class="right-box">
      <p class="title">
        <router-link
          :to="{
            name: 'BlogDetail',
            params: {
              id: blogItem?.id,
            },
          }"
          >{{ blogItem?.title || "未知" }}</router-link
        >
      </p>
      <ul class="meta">
        <li>
          <span>{{ `日期: ${blogItem?.createDate || "无"}` }}</span>
        </li>
        <li>
          <span>{{ `浏览: ${blogItem?.scanNumber || "0"}` }}</span>
        </li>
        <li>{{ `评论${blogItem?.commentNumber || ""}` }}</li>
        <li>
          <router-link
            :to="{
              name: 'CategoryBlog',
              params: { categoryId: blogItem?.category?.id },
              query: {
                page: 1,
                limit: limit,
              },
            }"
          >
            {{ `${blogItem?.category?.name || ""}` }}
          </router-link>
        </li>
      </ul>
      <p class="desc">{{ blogItem?.description || "无" }}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "BlogItem",
  props: {
    blogItem: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    limit() {
      return +this.$route.query.limit || 10;
    },
  },
};
</script>

<style scoped lang="less">
@import "@/styles/var.less";
p {
  padding: 0;
  margin: 0;
}

.now-warp {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.blogitem-container {
  height: 140px;
  display: flex;
  gap: 5px;
  padding: 10px;
  border-bottom: 1px solid @lightWords;

  .left-box {
    width: 140px;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      border-radius: 8px;
    }
  }

  .right-box {
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 14px;
    .title {
      .now-warp();
      font-size: 18px;
      font-weight: 600;
      line-height: 30px;
    }
    .meta {
      color: @gray;
      font-size: 14px;
      display: flex;
      flex-wrap: nowrap;
      gap: 10px;
      li {
        .now-warp();
        display: flex;
        gap: 7px;
        align-items: center;
      }
    }
    .desc {
      color: @lightWords;
      line-height: 25px;
      // text-indent: 2em;
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      line-clamp: 3;
      -webkit-line-clamp: 3; /* 最多显示2行 */
      -webkit-box-orient: vertical;
    }
  }
}
</style>
